<!--
 * @Descripttion:主界面
 * @version:
 * @Author: 冉勇
 * @Date: 2021-11-18 13:04:40
 * @LastEditTime: 2021-12-17 09:31:23
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/x-ico" href="./images/favicon.ico"/>
    <title>sakur yongRanlra</title>
    <link rel="stylesheet" href="asserts/css/main.css" />
    <noscript><link rel="stylesheet" href="assets/css/noscript.css"/></noscript>
    <script src="js/vue.min.js" language="JavaScript"></script>
    <script src="js/jquery-3.4.1.min.js"></script>
    <!-- <script src="js/html2canvas.min.js" async="async"></script> -->
    <style>
        /* 设置照片圆角 */
        img {
        border-radius: 10px;
        }
    </style>
</head>

<body class="is-preload">
    <!-- Loader -->
    <link rel="stylesheet" href="asserts/css/loader.css" />
    <div class="loader">
        <div class="container">
            <h1>🍎</h1>
            <p>摇匀</p>
            <p>再喝</p>
        </div>
    </div>
    <!-- Wrapper -->
    <div id="wrapper">
        <!-- Main -->
        <section id="main">
            <!-- Welcome Message and Contacts -->
            <header v-show="Contacts">
                <span class="avatar">
                    <img src="./images/leimu.jpeg" alt="头像" style="width: 122px; height: 122px" />
                </span>
                <h1>冉某某</h1>
                <transition-group name="fade">
                    <div v-show="defaults" key="text">
                        <p>我不知道你从哪找到我的，但是你确实找到我了。</p>
                        <p>
                            如果你想知道更多关于我的东西……
                        </p>
                        <button class="button small fit" @click="showAbout" v-bind:disabled="onTransition==1">
                            点我!
                        </button>
                        <div class="highlight">
                            <span>博客新开业啦！确定不来康康吗？</span><br>
                            <a href="http://sakura.daydayupran.top/">🌸Sakura</a>
                        </div>
                    </div>

                    <div v-for="item in contacts" v-if="item.show" key="item.name" v-html="item.content"></div>
                    <button class="button small" key="button" @click="hideContact(true)" style="opacity: 0.55"
                        v-show="backButton">
                        返回
                    </button>
                </transition-group>
            </header>
            <hr />
            <footer v-show="Contacts">
                <ul class="icons">
                    <li v-for="item in contacts">
                        <a @click="showContact(item.name)" :class="item.icon">{{item.desc}}</a>
                    </li>
                </ul>
            </footer>
            <!-- Page container -->
            <header v-show="info">
                <transition-group name="fade">
                    <h1 key="title">{{ title }}</h1>
                    <p key="text" v-for="text in texts">{{ text }}</p>
                    <div v-html="html" key="html"></div>
                    <img v-bind:src="img" key="img" style="width: 95%; height: auto" v-for="img in imgs" />
                    <div key="buttons">
                        <button class="button small" v-bind:disabled="(nowPage < startPage || onTransition==1)"
                            @click="navigate(-1)">
                            上一页
                        </button>
                        <button class="button small" v-bind:disabled="(nowPage >= endPage - 2 || onTransition==1)"
                            @click="navigate(1)">
                            下一页
                        </button>
                    </div>
                    <hr key="br" />
                    <button @click="returnToContact" key="button" class="button fit" v-bind:disabled="onTransition==1">
                        返回
                    </button>
                </transition-group>
            </header>
        </section>
        <!-- Footer -->
        <footer id="footer"></footer>
    </div>
    <!-- Scripts -->
    <script>
        if ("addEventListener" in window) {
            window.addEventListener("load", function () {
                document.body.className = document.body.className.replace(
                    /\bis-preload\b/,
                    ""
                );
            });
            document.body.className += navigator.userAgent.match(/(MSIE|rv:11\.0)/)
                ? " is-ie"
                : "";
        }
    </script>
    <!-- Vuejs -->
    <script language="javascript">
        var mainsec = new Vue({
            el: "#main",
            data: {
                title: "", // The title of one page
                html: "", // HTML text of one page
                texts: [], // Pure texts of one page
                imgs: [], // Image url of a page's images
                startPage: 1, // First page of the website
                endPage: 4, // The last page of the website
                defaults: 1, // Show welcome message
                Contacts: 1, // Detect if to show contacts
                info: 0, // If to show designed pages
                deg: 0, // Main section rotate deg
                backButton: false,
                /**
                 * show为true,会显示出来
                 * jump为true，会直接跳转链接
                 **/
                contacts: [
                    {
                        name: "Wechat",
                        icon: "icon brands fa-weixin",
                        desc: "微信",
                        content: "<img src='https://gitee.com/ran_yong/mark-down-table-upload/raw/master/img/141639704407_.pic.jpg' class='qr' />",
                        show: false,
                        jump: false,
                    },
                    {
                        name: "QQ",
                        icon: "icon brands fa-qq",
                        desc: "QQ",
                        content:
                            "<img src='https://gitee.com/ran_yong/mark-down-table-upload/raw/master/img/131639704407_.pic.jpg' class='qr' /><h2>QQ:<a style='color:#fff; background-color:#f0a1a8;' href='https://qm.qq.com/cgi-bin/qm/qr?k=eXTNr8LNXRoQqmh4x5Iz2zA3v561B8aB&noverify=0' target='_blank' >1311518086</a></h2>",
                        show: false,
                        jump: false,
                    },
                    {
                        name: "Github",
                        icon: "icon brands fa-github",
                        desc: "Github",
                        content: "https://github.com/ranyong1997",
                        show: false,
                        jump: true,
                    },
                ],
                //Pages content
                page: [
                    {
                        title: "我是烂好人",
                        texts: [
                            "ᴵ ᵐᵉᵗ ʸᵒᵘ ˡᵃᵗᵉ / ᵇᵘᵗ ᴵ ʷⁱˡˡ ᵃᶜᶜᵒᵐᵖᵃⁿʸ ʸᵒᵘ ᶠᵒʳ ᵃ ˡᵒⁿᵍ ᵗⁱᵐᵉ.","我遇见你很晚/可是我会陪伴你很久。",
                        ],
                        html: "<div>↓新博客现在启程啦~↓</br><a href='https://sakura.daydayupran.top/' style='text-decoration: underline;'>🌸Sakura</a></div>",
                        imgs: ["images/bg.jpg"],
                    },
                    {
                        title: "有很多的爱好",
                        texts: [
                            "喜欢摄影",
                            "健身",
                            "写公众号",
                            "周末没事就是CRUD"
                        ],
                        html: "<div><span>更多请点击：</span><a href='https://user.qzone.qq.com/1311518086/photo/V50Sapfd39UlGy2bMNLK17le2H1AvUL4/' target='_blank' style='color:#f0a1a8;'>我的相册</a></div>",
                        imgs: ["images/photo.jpg","images/fitness.jpg","images/writing.jpg"],
                    },
                    {
                        title: "开发的项目",
                        imgs: ["https://camo.githubusercontent.com/167a8e05f4b3a937f0387c2163352d54a59fabc71abecd8020133cda49603d76/68747470733a2f2f6769746875622d726561646d652d73746174732e76657263656c2e6170702f6170693f757365726e616d653d72616e796f6e67313939372673686f775f69636f6e733d74727565267468656d653d73796e746877617665"],
                        html: "<div><span>开发的项目:</span><a href='https://github.com/ranyong1997/Api_Automator' target='_blank' style='color:#f0a1a8;'>Api_Automator</a></div>"
                    },
                    {
                        title: "写在最后",
                        texts: ["The END"],
                        html: '<span><p>如果你想让我加点什么或者想了解更多，可以点下面的返回按钮，然后通过各种方式联系我哦~</p><p>Last updated: Dec 15, 2021<p></span>',
                        imgs: ["images/guimie.jpeg"],
                    },
                    {
                        title: "last page",
                        texts: ["Can only access with ?page=#"],
                        html: "#",
                    },
                ],
                nowPage: 0, // Pointer to current page
                onTransition: 0, //If the transition animation is on
            },
            methods: {
                showContact: function (name) {
                    let num = 0;
                    for (let i = 0; i < this.contacts.length; i++) {
                        if (this.contacts[i].name == name) {
                            num = i;
                            break;
                        }
                    }
                    if (this.contacts[num].jump == true) {
                        window.open(this.contacts[num].content);
                        return;
                    }
                    this.hideContact(false);
                    this.defaults = 0;
                    clearTimeout(this.timer);
                    this.timer = setTimeout(() => {
                        this.contacts[num].show = true;
                        this.backButton = true;
                    }, 500);
                },
                hideContact: function (neededDefault = true) {
                    for (i = 0; i < this.contacts.length; i++) {
                        this.contacts[i].show = false;
                    }
                    clearTimeout(this.timer);
                    if (neededDefault == true) {
                        this.backButton = false;
                        this.timer = setTimeout(() => {
                            this.defaults = 1;
                        }, 500);
                    }
                },
                showAbout: function () {
                    this.rotateCard(-360, 1, "Y");
                    var that = this;
                    setTimeout(function () {
                        that.info = 1;
                        that.Contacts = 0;
                    }, 400);
                },
                returnToContact: function () {
                    this.rotateCard(360, 1, "Y");
                    var that = this;
                    setTimeout(function () {
                        that.info = 0;
                        that.Contacts = 1;
                    }, 400);
                },
                rotateCard: function (deg, time, axis) {
                    this.onTransition = 1;
                    this.deg += deg;
                    var ele = document.getElementById("main");
                    ele.style.transition = "transform " + time + "s 0s";
                    ele.style.transform = "rotate" + axis + "(" + this.deg + "deg)";
                    var that = this;
                    setTimeout(function () {
                        that.onTransition = 0;
                    }, time * 1000);
                },
                loadPage: function () {
                    this.title = this.page[this.nowPage].title;
                    this.texts = this.page[this.nowPage].texts;
                    this.html = this.page[this.nowPage].html;
                    this.imgs = this.page[this.nowPage].imgs;
                },
                navigate: function (m) {
                    if (m == 1) {
                        this.nowPage++;
                        this.rotateCard(-360, 1, "Y");
                        setTimeout("mainsec.loadPage()", 400);
                    }
                    if (m == -1) {
                        this.nowPage--;
                        this.rotateCard(+360, 1, "Y");
                        setTimeout("mainsec.loadPage()", 400);
                    }
                },
            },
            mounted: function () {
                this.loadPage();
                this.startPage = 1;
                this.endPage = this.page.length;
            },
        });
    </script>
    <style>
        .fade-enter-active,
        .fade-leave-active {
            transition: all 0.5s;
        }

        .fade-enter,
        .fade-leave-to {
            opacity: 0;
            transform: scale(0%, 0%);
        }

        .qr {
            text-align: center;
            width: 80%;
            height: 80%;
        }
    </style>
    <script>
        let FirstTriggered = true;
        function loaded() {
            timeout = FirstTriggered ? 1200 : 0;
            var page = getQueryVariable("page");
            if (page >= mainsec.startPage && page <= mainsec.endPage && page) {
                var m = mainsec;
                mainsec.nowPage = page - 1;
                setTimeout(function () {
                    m.rotateCard(-360, 1, "Y");
                    setTimeout(function () {
                        m.loadPage();
                        m.info = 1;
                        m.Contacts = 0;
                    }, 400);
                }, timeout);
            }
            if (FirstTriggered) {
                $("body").on("dblclick", "img", function () {
                    window.open(this.src);
                });
            }
            if (
                getQueryVariable("showContacts") ||
                getQueryVariable("showcontacts")
            )
            FirstTriggered = false;
        }
    </script>
    <script src="js/common.js"></script>
</body>

</html>